import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
import Welcome from '@/views/Welcome.vue'
import ArticeList from '@/views/ArticeList.vue'
import Image from '@/views/Image.vue'
import ArticlePublish from '@/views/ArticlePublish.vue'
// 测试组件
import MyCom from '@/test/slot/MyCom.vue'
Vue.use(VueRouter)
const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  { path: '/slot', component: MyCom },
  {
    path: '/home',
    component: Home,
    redirect: '/home/welcome',
    children: [
      { path: 'welcome', component: Welcome },
      { path: 'alist', component: ArticeList },
      // 素材列表
      { path: 'image', component: Image },
      { path: 'publish', component: ArticlePublish }
    ]
  }
]

const router = new VueRouter({
  routes
})
router.beforeEach((to, from, next) => {
  // to 表示目标路由
  // from 表示来源路由
  // next 控制路由的跳转（调用该方法可以让路由正常跳转，如果没有调用该方法，那么这个路由不会正常跳转。）
  // 这里要处理何种功能？统一判断用户是否已经登录
  // 如果已经登录，正常跳转，否则跳转到登录页面
  // 如果本身就是登录组件的路径，要排除掉
  if (to.path !== '/login' && !sessionStorage.getItem('mytoken')) {
    // 跳转路径不是/login 并且 token 不存在，跳转到登录页面
    // next函数的参数可以指定向哪里跳转（参数：路由的跳转路径）
    next('/login')
  } else {
    // 正常跳转
    // 如果next函数不添加参数就表示，跳转到默认组件中
    next()
  }
})
export default router
